<template>
  <el-dialog :model-value="visible" title="邀请员工" width="40%" @close="cancel" :z-index="9">
    <div class="boardBox">
      <div class="tishi">员工创建之后，手机号作为员工登录账号，新注册用户密码发送至注册手机上，若已注册，密码为 “牛域网 APP” 账号密码</div>
      <el-form ref="queryForm" label-width="120px" class="mt20" :model="queryParams" :rules="rules">
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="queryParams.name" placeholder="员工姓名" clearable />
        </el-form-item>
        <el-form-item label="联系方式" prop="mobile">
          <el-input v-model="queryParams.mobile" placeholder="联系方式" clearable />
        </el-form-item>
        <el-form-item label="部门：" prop="dept_id">
          <!-- <el-select v-model="formObj.job_mode" placeholder="部门" style="width: 240px">
              <el-option v-for="item in deptoptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select> -->
          <el-cascader style="width: 100%" :options="deptoptions" :props="props1" clearable v-model="queryParams.dept_id" @change="handleChange" ref="selectedArrRef" />
        </el-form-item>
        <el-form-item label="岗位" prop="position">
          <el-input v-model="queryParams.position" placeholder="岗位" clearable />
        </el-form-item>
        <el-form-item label="入职时间" prop="hired_time">
          <el-date-picker v-model="queryParams.hired_time" value-format="YYYY-MM-DD" type="date" placeholder="选择日期" :size="size" style="width: 100%"  :disabled-date="pickerOptionsrz" />
        </el-form-item>
        <el-form-item label="员工状态：" prop="job_status">
          <el-select v-model="queryParams.job_status" placeholder="员工状态" style="width: 100%">
            <el-option v-for="item in jobstatusoptions" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button color="#01509f" type="primary" @click="submitForm">生成邀请链接</el-button>
      </div>
    </div>

    <Invitesuccess v-model:visible="addvisible" :info="info"/>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, watch } from "@/TUIKit/adapter-vue";
  import { invite_user, getDepartmentlist } from "@/api/cf";
   import Invitesuccess from "./Invitesucess.vue";
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });
  const deptoptions = ref([]);
  const job_modeoptions = ref([]);

  const queryParams = ref({ name: "", dept_id: "", position: "", hired_time: "", job_status: "", mobile: "" });
  const emit = defineEmits<{ (event: "update:visible", value: boolean): void; (event: "chananniu", value: ""): void }>();
  // 获取表单引用
  const queryForm = ref(null);
  // 监听 localValue 的变化，通知父组件更新值
  watch(
    () => props.visible,
    newValue => {
      if (newValue) {
        const data={ name: "", dept_id: "", position: "", hired_time: "", job_status: "", mobile: "" }
         queryParams.value = data;
        getDepartmentlist().then(res => {
          deptoptions.value = res.data;
        });


      }
    }
  );
  const info = ref({ url: "", qrcode: "" });
  const addvisible = ref(false);

  const rules = reactive({
    name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
    hired_time: [{ required: true, message: "请选择入职时间", trigger: "change" }],
    dept_id: [{ required: true, message: "请选择部门", trigger: "change" }],
    position: [{ required: true, message: "请输入岗位", trigger: "blur" }],
    mobile: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
    job_status: [{ required: true, message: "请选择员工状态", trigger: "change" }],
  });
  const jobstatusoptions = ref([
    { value: 1, name: "试用" },
    { value: 2, name: "正式" },
  ]);
  const props1 = reactive({
    checkStrictly: true,
    emitPath: false,
    multiple: false,
    value: "id",
    label: "name",
    children: "children",
  });

  const selectedArrRef = ref(null);
  function handleChange(value) {
    selectedArrRef.value.togglePopperVisible();

  }



  const pickerOptionsrz = (time: Date) => {
  const today = new Date();
    return time.getTime() >= today ; //时间范围必须是时间戳
  };

  function cancel() {
    emit("update:visible", false);
    emit("chananniu", "");
  }


  function submitForm() {
    queryForm.value.validate(valid => {
      if (valid) {
        invite_user(queryParams.value)
          .then(res => {
            if(res.code==1){
             ElMessage({
              message: res.msg,
              grouping: true,
              type: "success",
              });
            info.value = res.data;
            addvisible.value = true;
            emit("update:visible", false);
  
            emit("chananniu", "");
            }
 
       
          })
      
      } else {
        console.log("表单验证失败");
        return false;
      }
    });
  }
</script>

<style lang="scss" scoped>
.boardBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow-y: scroll;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }


  -ms-overflow-style: none;
  scrollbar-width: none;

  .tishi {
    font-size: 14px;
    color: #999;
    background-color: #f3f8fb;
    padding: 5px 10px;
    border-radius: 6px;
  }
}

::v-deep .el-form-item__label {
  font-size: 16px !important;
}
</style>
